<template>
	<view class="wrap" style="padding-top:50rpx;">
		<!-- <view class="logo">干部测评投票端</view> -->

		<view style="padding: 0 20px;">
			<u-form label-position="top" :model="form" ref="uForm">
				<u-form-item :border-bottom="true" label="地址" prop="name">
					<u-input  placeholder="请输入地址" v-model="form.name" />
				</u-form-item>
			</u-form>

			<u-form-item label-position="top" label="选择地址">
				<u-radio-group active-color="#f1732a" v-model="form.radio" @change="radioGroupChange">
					<u-radio v-for="(item, index) in radioList" :key="index" :name="item.name">
						{{ item.lable }}
					</u-radio>
				</u-radio-group>
			</u-form-item>
			<view class="button" @click="submit()"><text>提交</text></view>
		</view>

	</view>
</template>
<script>
	export default {
		data() {
			return {
				radioList: [{
						name: 'http://zzrs-tpd.yun.cqyt.petrochina/',
						lable: "正式环境-http://zzrs-tpd.yun.cqyt.petrochina"
					},
					{
						name: 'http://zzrs-tpd.yunuat.cqyt.petrochina/',
						lable: "测试环境-http://zzrs-tpd.yunuat.cqyt.petrochina"
					},
					// {
					// 	name: 'https://www.baidu.com/',
					// 	lable: "https://www.baidu.com"
					// },
					
				],
				form: {
					name: '',
					radio: '',
				},
				rules: {
					name: [{
						required: true,
						message: '请输入地址',
						// 可以单个或者同时写两个触发验证方式 
						trigger: ['change', 'blur'],
					}],

				}
			};
		},
		methods: {

			// 选中任一radio时，由radio-group触发
			radioGroupChange(e) {
				console.log(e);
				this.form.name = e
			},
			submit() {
				this.$refs.uForm.validate(valid => {
					if (valid) {
						console.log('验证通过');
						uni.navigateTo({
							url:"/pages/common/webview?url="+this.form.name
						})
					} else {
						console.log('验证失败');
					}
				});
			}
		},
		// 必须要在onReady生命周期，因为onLoad生命周期组件可能尚未创建完毕
		onReady() {
			this.$refs.uForm.setRules(this.rules);
		}
	};
</script>

<style lang="scss">
	/deep/ .u-radio__label {
		font-size: 14px !important;

	}

	/deep/ .u-radio {
		margin-bottom: 10px;
	}

	.button {
		color: #ffffff;
		font-size: 32rpx;
		width: 80%;
		height: 80rpx;
		background: #f1732a;
		box-shadow: 0rpx 0rpx 13rpx 0rpx rgba(162, 108, 0, 0.4);
		border-radius: 10rpx;
		line-height: 80rpx;
		text-align: center;
		margin: 50rpx auto 0;
	}

	.logo {
		width: 90%;
		font-size: 50rpx;
		color: #f1732a;
		margin: 80rpx auto 120rpx auto;
	}

	/deep/ .u-label {
		width: 0 !important;
	}
</style>
